<script>
import Api from '@/api/index.js'
import loadingSVG from './images/loading.svg'
const originSize = 15;
export default {
  name: "manager",
  components: {
  },
  data() {
    return {
      loadingSVG: `
        <circle class="path" cx="25" cy="25" r="10" fill="none">
        </circle>
      `,
      // 正在上传
      isUploading: false,
      // 正在导出
      isExporting: false,
      originSize: originSize,
      formData: {
        wordName: '',
        page: 1,
        size: originSize
      },
      totalDataLength: 0,
      tableData_s: "",
      tableData: [],
      dialogVisible: false,
      dialogVisibleDetail: false,
      // 当前选中的一行数据
      currentRow: null,
      dialogVisibleMuti: false,
      selectionArr: []
    };
  },
  computed: {
    mainStyle() {
      let maxHeight = window.innerHeight / window.dpr - 320;
      return {
        height: maxHeight + 'px'
      }
    },
  },
  watch: {},
  mounted() {
    this.doSearch()
  },
  beforeUnmount() { },
  methods: {
    //  查询
    doSearch() {
      Api.getComplainListDataWORD({
        page: this.formData.page,
        size: this.formData.size,
        wordName: this.formData.wordName
      }).then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            // v.bjsx = dayjs(v.bjsx).format('YYYY/MM/DD HH:mm:ss');
            // v.pdsj = dayjs(v.pdsj).format('YYYY/MM/DD HH:mm:ss');
            v.id = v.wordName
          })
          this.tableData = res.data;
          this.totalDataLength = res.count;
        } else {
          this.tableData = [];
          this.totalDataLength = 0;
        }
      })
    },
    //  重置
    reset() {
      this.formData.wordName = '';
      this.formData.page = 1;
      this.formData.size = this.originSize;
      this.doSearch();
    },
    handleUpload() {
      this.$refs.fileInput.click(); // 触发文件选择
    },
    readExcel(event) {
      this.isUploading = true;
      const fileList = event.target.files;
      this.excelName = fileList[0].name
      const excelFile = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', excelFile)
      Api.uploadSheetFile(formData).then(res => {
        this.doSearch()
      }).finally(_ => {
        this.isUploading = false;
      })
      // 手动清空数据
      this.$refs.fileInput.value = null;
    },
    changeType(v) {
      this.doSearch();
    },
    // 搜索热源
    doSearchSource() {
      this.doSearch()
    },
    // 搜索热源
    doSearchArea() {
      this.doSearch();
    },
    // 确认删除掉
    confirmDelete(v) {
      if (!v) {
        return
      }
      if (!v.id) {
        return;
      }
      Api.deleteMutiComplainWORD([v.id]).then(res => {
        this.$message({
          message: res.msg,
        })
        this.reset();
      })
      this.dialogVisible = false;
      this.currentRow = null;
    },
    // 查看详情
    checkDetailData() {
    },
    // 当前页码改变
    currentChange(v) {
      this.formData.page = v;
      this.doSearch();
    },
    //  导出
    handleDwonload(row) {
      if (!row.id) { return }
      this.isExporting = true;
      const stamp = dayjs(row.id).format('YYYY-MM-DD')
      Api.exportSingleWORDfile({
        // 当日时间
        time: stamp,
      }).then(res => {
        this.isExporting = false;
        const blob = new Blob([res], {
          type: res.type
        });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = stamp + '.doc';
        link.style.display = 'none';
        document.body.appendChild(link)
        link.click();
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      }).finally(_ => {
        this.isExporting = false;
      })
    },
    handleSelectionChange(v) {
      if (!v.length) {
        this.selectionArr = []
      } else {
        this.selectionArr = v.map(v_ => v_.id)
      }
      console.log(this.selectionArr)
    },
    confirmDeleteMuti() {
      if (!this.selectionArr.length) { return }
      Api.deleteMutiComplainWORD(this.selectionArr).then(res => {
        this.$message({
          message: res.msg,
        })
        this.reset();
      }).finally(_ => {
        this.dialogVisibleMuti = false;
      })
    }
  },
};
</script>

<template>
  <!-- layout 外包层 -->
  <div class="manager full-height">
    <div class="titles-area">
      <div class="main-title font-alimamashuheiti">
        历史回溯
      </div>
      <div class="sub-title font-AlibabaPuhui">
        查看已经导出投诉报告的情况
      </div>
    </div>
    <div class="search-area">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="8" class="inline-flex-self">
                  <el-text class="mx-1">报告名称：</el-text>
                </el-col>
                <el-col :span="16">
                  <el-input placeholder="请输入报告名称" v-model="formData.wordName"
                    @keyup.enter="doSearchSource()"></el-input>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <!--        <el-col :span="3">-->
        <!--          <el-input placeholder="请输入小区名称" v-model="formData.ssxq" @keyup.enter="doSearchArea()"></el-input>-->
        <!--        </el-col>-->
        <!--        <el-col :span="4">-->
        <!--          <el-select placeholder="请选择投诉类型" v-model="formData.wtfl" clearable @change="changeType">-->
        <!--            <el-option value="供暖不热" label="供暖不热"></el-option>-->
        <!--            <el-option value="申请供热服务" label="申请供热服务"></el-option>-->
        <!--            <el-option value="收费退费欠费赔偿等问题" label="收费退费欠费赔偿等问题"></el-option>-->
        <!--            <el-option value="供热设施维修" label="供热设施维修"></el-option>-->
        <!--            <el-option value="非市政集中供热问题" label="非市政集中供热问题"></el-option>-->
        <!--            <el-option value="其它问题" label="其它问题"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-col>-->
        <el-col :span="8">
          <el-button type="primary" @click="() => {
            doSearch()
          }">查询</el-button>
          <el-button type="info" @click="() => {
            reset()
          }">重置</el-button>
          <!--          <el-button-->
          <!--              type="success"-->
          <!--              plain-->
          <!--              @click="handleDwonload"-->
          <!--              :disabled="isExporting"-->
          <!--              v-loading="isExporting"-->
          <!--              :element-loading-svg="loadingSVG"-->
          <!--              element-loading-svg-view-box="0,0,50,50"-->
          <!--              element-loading-background="rgba(0, 0, 0, 0.2)"-->
          <!--          >-->
          <!--            <el-icon class="el-icon&#45;&#45;right">-->
          <!--              <Document />-->
          <!--            </el-icon>生成报告-->
          <!--          </el-button>-->
          <!--          <el-button-->
          <!--              type="primary"-->
          <!--              plain-->
          <!--              @click="handleUpload"-->
          <!--              :disabled="isUploading"-->
          <!--              v-loading="isUploading"-->
          <!--              :element-loading-svg="loadingSVG"-->
          <!--              element-loading-svg-view-box="0,0,50,50"-->
          <!--              element-loading-background="rgba(0, 0, 0, 0.2)"-->
          <!--          >-->
          <!--            <el-icon class="el-icon&#45;&#45;right">-->
          <!--              <Upload />-->
          <!--            </el-icon>导入-->
          <!--          </el-button>-->
          <el-button type="danger" plain @click="() => { dialogVisibleMuti = true; }"
            :disabled="selectionArr.length < 1">
            <el-icon class="el-icon--right">
              <Delete />
            </el-icon>
            批量删除
            <span v-if="selectionArr.length >= 1">
              ({{ selectionArr.length }})
            </span>
          </el-button>
          <input type="file" accept=".xlsx, .xls" ref="fileInput" @change="readExcel" style="display:none;" />
        </el-col>
      </el-row>
    </div>
    <div class="list-area">
      <el-table :data="tableData" :style="mainStyle" border stripe @selection-change="handleSelectionChange"
        row-key="id" empty-text="暂无数据" :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column header-align="center" align="center" type="selection" width="60" />
        <el-table-column header-align="center" type="index" label="序号" align="center" width="70" />
        <el-table-column header-align="center" prop="wordName" label="报告名称" min-width="100" sortable />
        <el-table-column header-align="center" align="center" prop="createTime" label="创建时间" min-width="120" sortable />
        <el-table-column header-align="center" align="center" prop="exportTime" label="导出时间" min-width="120" sortable />
        <!--        <el-table-column header-align="center" prop="wtfl" label="问题分类" min-width="120"  />-->
        <!--        <el-table-column header-align="center" align="center" prop="pdsj" label="派单时间" width="180" />-->
        <!--        <el-table-column header-align="center" align="center" prop="bjsx" label="办结时限" width="180" />-->
        <!--        <el-table-column header-align="center" prop="tsqd" label="投诉渠道" />-->
        <el-table-column header-align="center" fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button link type="danger" size="small"
              @click="(e) => { currentRow = scope.row; dialogVisible = true; }">
              删除
            </el-button>
            <!--            <el-button link type="primary" size="small"-->
            <!--              @click="(e) => { currentRow = scope.row; dialogVisibleDetail = true; }">-->
            <!--              查看详情-->
            <!--            </el-button>-->
            <el-button link type="success" size="small" @click="(e) => { handleDwonload(scope.row) }">
              导出
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-area">
        <el-pagination background :page-size="formData.size" @current-change="currentChange" layout="prev, pager, next"
          :total="totalDataLength" />
      </div>
      <el-dialog v-model="dialogVisible" title="删除" width="300">
        <p class="" style="font-size: 16px;">请确认是否删除</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false; currentRow = null;">取消</el-button>
            <el-button size="small" type="danger" @click="confirmDelete(currentRow)">
              删除
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleMuti" title="批量删除" width="300">
        <p class="" style="font-size: 16px;">请确认是否批量删除选中的 {{ selectionArr.length }} 项记录</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisibleMuti = false;">取消</el-button>
            <el-button size="small" type="danger" @click="confirmDeleteMuti()">
              删除
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleDetail" width="500" title="投诉信息详情">
        <div v-if="currentRow">
          <el-descriptions class="margin-top" :column="1" border label-width="120">
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  所属公司
                </div>
              </template>
              <span>{{ currentRow.ssgs }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  所属小区
                </div>
              </template>
              <span>{{ currentRow.ssxq }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  问题分类
                </div>
              </template>
              <span>{{ currentRow.wtfl }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  派单时间
                </div>
              </template>
              <span>{{ currentRow.pdsj }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  办结时限
                </div>
              </template>
              <span>{{ currentRow.bjsx }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  投诉渠道
                </div>
              </template>
              <span>{{ currentRow.tsqd }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  主要内容
                </div>
              </template>
              <span>{{ currentRow.zynr }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  主诉求描述
                </div>
              </template>
              <span>{{ currentRow.zsqms }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  来电人
                </div>
              </template>
              <span>{{ currentRow.ldr }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  联系方式
                </div>
              </template>
              <span>{{ currentRow.lxfs }}</span>
            </el-descriptions-item>
          </el-descriptions>

        </div>
        <template #footer>
        </template>
      </el-dialog>
    </div>

  </div>
</template>
<style></style>
<style lang="less">
.manager {

  &>.list-area {
    height: calc(100% - 50px);

    &>.page-area {
      height: 50px;
    }
  }
}

.search-area {
  margin-bottom: 1rem;
}

.page-area {
  padding-right: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
}

.titles-area {
  &>.main-title {
    font-size: 2rem;
    line-height: 2;
  }

  &>.sub-title {
    font-size: 1.4rem;
    color: #9e9e9e;
    line-height: 2;
  }
}
</style>
